/**
 * FORM 表单演示 - 依赖
 *
 */
import { Form, Switch, Button, Input } from "antd";

const App: React.FC = () => {
  //表单
  const [form] = Form.useForm();

  //打印表单内容
  const show = () => {
    console.log(form.getFieldsValue());
  };

  return (
    <Form
      form={form}
      name="c"
      autoComplete="off"
      style={{ maxWidth: 600 }}
      layout="vertical"
    >
      <Form.Item>
        <h1>依赖</h1>
      </Form.Item>
      <Form.Item label="状态" name="state">
        <Switch />
      </Form.Item>
      <Form.Item label="输入" name="input">
        <Input />
      </Form.Item>

      {/* Render Props */}
      <Form.Item label="展示输入" dependencies={["input"]}>
        {() => (
          <pre>{JSON.stringify(form.getFieldsValue().input, null, 2)}</pre>
        )}
      </Form.Item>
      <Form.Item label="展示状态" dependencies={["state"]}>
        {() => (form.getFieldsValue().state ? "2" : "1")}
      </Form.Item>
      <Form.Item>
        <Button onClick={show}>打印表格</Button>
      </Form.Item>
    </Form>
  );
};

export default App;
